@page "/counter"
@rendermode InteractiveServer
@using Blazor.Extensions.Canvas
@using Blazor.Extensions;
@using Blazor.Extensions.Canvas.Canvas2D;
@using Blazor.Extensions.Canvas.Model;
@using FaceCat;

<PageTitle>FaceCat-Blazor</PageTitle>
<script src="_content/Blazor.Extensions.Canvas/blazor.extensions.canvas.js"></script>
<Blazor.Extensions.Canvas.BECanvas Width="1200" Height="700" @ref="_canvasReference" />
@code {
    protected BECanvasComponent _canvasReference;
    private Canvas2DContext _context;
    private FCNative m_native;
    private BlazorHost m_host;
    private BlazorPaint m_paint;
    private MainFrame m_xml;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            if (m_native == null)
            {
                m_xml = new MainFrame();
                m_xml.createNative();
                m_native = m_xml.getNative();
                m_paint = new BlazorPaint();
                m_native.setPaint(m_paint);
                m_host = new BlazorHost();
                m_native.setHost(m_host);
                m_host.setNative(m_native);
                m_native.setSize(new FCSize((int)_canvasReference.Width, (int)_canvasReference.Height));
                string xml = @"<?xml version=""1.0"" encoding=""utf-8"" ?>
                <html xmlns=""facecat"">
                <body>
                    <div bordercolor=""none"" name=""divInner"" dock=""fill"">
                        <div type=""tab"" dock=""fill"" selectedindex=""0"" backcolor=""none"" bordercolor=""none""
                        name=""tabFunc"">
                            <div type=""tabpage"" text=""主界面"" name=""divMain"" backcolor=""none"" bordercolor=""none"">
                            <div type=""splitlayout"" layoutstyle=""lefttoright"" bordercolor=""none"" dock=""fill""
                                    size=""610,610"" candragsplitter=""true"" splitterposition=""500,1"" name=""divCodingRight2"">
                                    <div type=""custom"" cid=""securitylist"" name=""gridStocks"" headerheight=""30"" dock=""fill""
                                        gridlinecolor=""none"" bordercolor=""none"" showvscrollbar=""true"" showhscrollbar=""true""
                                        allowpreviewsevent=""true"" allowdragscroll=""true"">
                                        <tr>
                                            <th name=""colP0"" text=""序"" width=""40"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" />
                                            <th name=""colP1"" text=""代码"" width=""70"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" />
                                            <th name=""colP2"" text=""名称"" width=""70"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" />
                                            <th name=""colP3"" text=""现价"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP4"" text=""涨幅"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP5"" text=""涨跌"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP9"" text=""总量"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP10"" text=""总额"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP11"" text=""量比"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP12"" text=""PE动"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP13"" text=""振幅"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP14"" text=""换手率"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP15"" text=""总市值"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP16"" text=""流值"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP17"" text=""行业分类板块"" width=""80"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""center""/>
                                            <th name=""colP18"" text=""涨停价"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP19"" text=""跌停价"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP20"" text=""金比"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP21"" text=""涨跌比"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP22"" text=""涨速"" width=""60"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP23"" text=""净资产收益率"" width=""100"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                            <th name=""colP24"" text=""自设指标"" width=""80"" allowdrag=""true"" allowresize=""true"" backcolor=""-200000000193""
                                                bordercolor=""-200000000108"" textcolor=""-200000000100"" cellalign=""right""/>
                                        </tr>
                                    </div>
                                    <div type=""splitlayout"" layoutstyle=""toptobottom"" bordercolor=""none"" dock=""fill""
                                        size=""400,400"" candragsplitter=""true"" splitterposition=""400,1"">
                                        <div type=""splitlayout"" layoutstyle=""righttoleft"" bordercolor=""none"" dock=""fill""
                                            size=""400,400"" candragsplitter=""true"" splitterposition=""200,1"">
                                            <div type=""custom"" cid=""latestdiv"" name=""divLatest"" />
                                            <div type=""custom"" cid=""mychart"" name=""mainChart1"" cycle=""0"" />
                                        </div>
                                        <div type=""splitlayout"" layoutstyle=""lefttoright"" bordercolor=""none"" dock=""fill""
                                            size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""200,1"">
                                            <div type=""custom"" cid=""mychart"" name=""mainChart2"" cycle=""5"" />
                                            <div type=""custom"" cid=""mychart"" name=""mainChart3"" cycle=""1440"" />
                                        </div>
                                    </div>
                                </div>
                                </div>
                                <div type=""tabpage"" text=""多K线"" name=""divMulti"" backcolor=""none"" bordercolor=""none"">
                                    <div type=""splitlayout"" layoutstyle=""lefttoright"" backcolor=""none"" bordercolor=""none""
                                        dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""133,1"">
                                        <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                            dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""267,1"">
                                            <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                                dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""200,1"">
                                                <div type=""custom"" cid=""mychart"" name=""chart1"" cycle=""1"" nativerefresh=""true"" candledivpercent=""1""
                                                    voldivpercent=""0"" />
                                                <div type=""custom"" cid=""mychart"" name=""chart2"" cycle=""5"" nativerefresh=""true"" candledivpercent=""1""
                                                    voldivpercent=""0"" />
                                            </div>
                                            <div type=""custom"" cid=""mychart"" name=""chart3"" cycle=""10"" nativerefresh=""true"" candledivpercent=""1""
                                                voldivpercent=""0"" />
                                        </div>
                                        <div type=""splitlayout"" layoutstyle=""lefttoright"" backcolor=""none"" bordercolor=""none""
                                            dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""200,1"">
                                            <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                                dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""267,1"">
                                                <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                                    dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""200,1"">
                                                    <div type=""custom"" cid=""mychart"" name=""chart4"" cycle=""15"" nativerefresh=""true"" candledivpercent=""1""
                                                        voldivpercent=""0"" />
                                                    <div type=""custom"" cid=""mychart"" name=""chart5"" cycle=""20"" nativerefresh=""true"" candledivpercent=""1""
                                                        voldivpercent=""0"" />
                                                </div>
                                                <div type=""custom"" cid=""mychart"" name=""chart6"" cycle=""30"" nativerefresh=""true"" candledivpercent=""1""
                                                    voldivpercent=""0"" />
                                            </div>
                                            <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                                dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""267,1"">
                                                <div type=""splitlayout"" layoutstyle=""toptobottom"" backcolor=""none"" bordercolor=""none""
                                                    dock=""fill"" size=""400,400"" candragsplitter=""true"" splitmode=""percentsize"" splitterposition=""200,1"">
                                                    <div type=""custom"" cid=""mychart"" name=""chart7"" cycle=""1440"" nativerefresh=""true""
                                                        candledivpercent=""1"" voldivpercent=""0"" />
                                                    <div type=""custom"" cid=""mychart"" name=""chart8"" cycle=""10080"" nativerefresh=""true""
                                                        candledivpercent=""1"" voldivpercent=""0"" />
                                                </div>
                                                <div type=""custom"" cid=""mychart"" name=""chart9"" cycle=""43200"" nativerefresh=""true""
                                                    candledivpercent=""1"" voldivpercent=""0"" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                </body>
                </html>";
                m_xml.loadXml(xml, null);
                m_native.update();
            }
            this._context = await this._canvasReference.CreateCanvas2DAsync();
            m_paint.m_context = this._context;
            m_native.invalidate();
        }
    }
}